<template>
    <div style="margin-bottom: 55px;">
        <!--官方榜单信息渲染-->
        <el-row style="border-bottom: 2px solid rgb(230,230,230)">
            <p style="margin-bottom: 10px;font-size: 22px;">官方榜</p>
        </el-row>

        <el-row style="margin-top: 25px;">
            <el-col :span="6" :offset="item === 1 || item===4 ? 2 : 1" :key="index" v-for="(item,index) in 4" style="margin-top: 25px;">
                <el-image :src="musicRankList[item-1].coverImgUrl" @click="toSongListPage(musicRankList[item-1].id)"
                          style="height: 200px;border-radius: 15px;cursor:pointer;"></el-image>

                <el-table :data="musicRankList[item-1].tracks" stripe
                          :show-header="false">
                    <el-table-column type="index">
                        <template slot-scope="scope">
                            <span style="color: red;font-weight: 400">{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="first"></el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <span>{{scope.row.second}}</span>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>

            <el-col :span="6" :offset="1" style="margin-top: 25px;">
                <el-image :src="singerRankInfo.coverUrl" style="height: 200px;border-radius: 15px;"></el-image>

                <el-table :data="singerRankInfo.artists" stripe :show-header="false">
                    <el-table-column>
                        <template slot-scope="scope">
                            <span style="color: red;font-weight: 400">{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="first"></el-table-column>
                </el-table>

            </el-col>
        </el-row>

        <el-row style="border-bottom: 2px solid rgb(230,230,230)">
            <p style="margin-bottom: 10px;font-size: 22px;">全球榜</p>
        </el-row>

        <el-row :gutter="10">

            <el-col :span="4" v-for="(item,index) in musicRankList.slice(4)" style="margin-top: 20px;position:relative;"
                    :key="index">

                <!--播放量-->
                <div style="background: rgba(128,128,128,0.2);color: white;
                                    width: 96%;position:absolute;z-index: 10;">
                    <div style="float:right;">
                        <i class="el-icon-headset" style="margin-right: 5px;"></i>
                        {{item.playCount >= 10000 ? (item.playCount/10000).toFixed(0)+'万' : item.playCount}}
                    </div>

                </div>

                <div>
                    <el-image :src="item.coverImgUrl" @click="toSongListPage(item.id)"
                              style="box-shadow: 0 0 2px 2px gray;border-radius: 10px;cursor: pointer">
                    </el-image>
                </div>


                <h1 @click="toSongListPage(item.id)" style="cursor:pointer;">{{item.name}}</h1>

            </el-col>

        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //排行榜的所有数据
                musicRankList: [
                    {
                        coverImgUrl: ''
                    },
                    {
                        coverImgUrl: ''
                    },
                    {
                        coverImgUrl: ''
                    },
                    {
                        coverImgUrl: ''
                    }
                ],
                //歌手榜的信息
                singerRankInfo: {
                    coverUrl: '',
                    artists: []
                }
            }
        },
        created() {
            //获取官方榜单的数据
            this.getOfficialRankList()
        },
        methods: {
            //获得官方榜单的数据
            getOfficialRankList() {
                this.$http.get('toplist/detail').then(res => {
                    this.musicRankList = res.data.list
                    this.singerRankInfo = res.data.artistToplist
                })
            },
            //点击歌单跳转界面
            toSongListPage(id) {
                this.$router.push('/songlist/' + id)
            },
            //双击歌曲添加数据进去,并循环播放(向父组件传递参数)
            playMusicList(row) {
                this.$emit('setSongListInfo', window.localStorage.getItem('playlist'), row.id)
            },
        }
    }
</script>

<style scoped>

</style>
